<template>
    <div class="dateDetail">
        <!-- <mTitle :title="title"></mTitle> -->
        <div v-show="arr.length">
            <Calendar ref="Calendar" :markDateMore="arr" v-on:choseDay="clickDay"></Calendar>
        </div>
        <!-- 请求数据loading -->
        <div class="loading-wrapper" v-show="!arr.length">
            <loading></loading>
        </div>
        <!-- 底部 -->
        <div class="date-fixed">
            <router-link :to="'/date/20000101'" replace tag="div" class="date-fixed-item">
                <i class="icon icon-item1"></i>
                <span class="desc">本周活动</span>
            </router-link>
            <router-link to="/dateDetail" replace tag="div" class="date-fixed-item active">
                <i class="icon icon-item2"></i>
                <span class="desc">日历一览</span>
            </router-link>
        </div>  
    </div>
</template>

<script>
    import Calendar from 'base/calendar/index'
    import axios from 'axios'
    import mTitle from 'base/title/title'
    import Loading from 'base/loading/loading'
    export default {
        data () {
            return {
                title: '日历一览',
                nowDate: '',
                arr2: [],
                arr: []
            }
        },
        methods: {
            clickDay (data) {
                this.$nextTick(() => {
                    this.flag = true
                    this.nowDate = [] 
                    for(let i=0;i<this.arr.length;i++) {
                        let date = this.arr[i].date;
                        if(data === this.arr[i].date) {
                            this.nowDate.push(this.arr[i].date);
                        }
                    }
                    if(this.nowDate[0] === undefined) {
                        return
                    }
                    this.nowDate.push(data)
                    let arr = this.nowDate[0].split('/')
                    if(arr[1].length < 2) {
                        arr[1] = '0' + arr[1]
                    }
                    if(arr[2].length < 2) {
                        arr[2] = '0' + arr[2]
                    }
                    arr = Number(arr.join(""))
                    // console.log(arr)
                    // console.log(typeof arr)
                    this.$router.push({
                        path: '/date/'+ arr
                    })
                    // this.$emit('checkDate', arr)
                })
            }
        },
        components: {Calendar,mTitle,Loading}, 
        mounted () {
            let today = new Date()
            let y = String(today.getFullYear())
            let m = String(today.getMonth() + 1)
            let d = String(today.getDate())
            if(m.length < 2) {
                m = '0' + m
            }
            if(d.length < 2) {
                d= '0' + d
            }
            this.nowDate = y+ m + d
        },
        created () {
            // 禁止页面滚动
            document.addEventListener('touchmove', function (event) {
                event.preventDefault();
            })
            axios.post('/api/index.php?g=Api&m=Ucenter&a=riliact', {
                openid: localStorage.getItem("openid"),
                mid: localStorage.getItem("memberid")
            }).then((res) => {
                if (res.data.rescode=='0000') {
                    this.arr = res.data.data
                }
            }).catch(function (error) {

            })
        }
    }
</script>

<style lang="stylus" scoped>
    .dateDetail
        width: 100%
        height: 100%
        position: fixed
        overflow: hidden
        top: 0
        left: 0
        background: #fff
        .loading-wrapper
            position: absolute
            width: 100%
            top: 50%
            -webkit-transform: translateY(-50%)
            transform: translateY(-50%)
            z-index: 9
        .date-fixed
            position: absolute
            height: 44px
            bottom: 0
            left: 0
            width: 100%
            display: flex
            align-items: center
            border-top: 1px solid #eee
            background: #fff
            .date-fixed-item
                flex: 1
                text-align: center
                &.active
                    .desc
                        color: #0094d4
                    .icon
                        background: url('./icon3-active.png') no-repeat
                        background-size: 100% 100%
                    .icon-item2
                        background: url('./icon4-active.png') no-repeat
                        background-size: 100% 100%
                .icon
                    display: block
                    background: url('./icon3.png') no-repeat
                    width: 15px
                    height: 19px
                    background-size: 100% 100%
                    margin: 0 auto
                .icon-item2
                    background: url('./icon4.png') no-repeat
                    width: 19px
                    height: 19px
                    background-size: 100% 100%
                .desc
                    display: block
                    font-size: 12px
                    color: #a1a1a1
                    margin-top: 4px
</style>